<script>
// 成员模态表单页
Vue.component('member-form', {
    template: `
<el-dialog :visible.sync="dialogShow" width="600px" @close="closeModal">
    <h3 slot="title">
        <span v-if="memberForm.id">编辑员工</span>
        <span v-else>新增员工</span>
    </h3>
    <el-form ref="form" :rules="memberRules" :model="memberForm" label-width="80px">
        <el-form-item v-if="memberForm.id" class="hidden">
        <el-input v-model="memberForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="员工名称" prop="name" required>
        <el-input autocomplete="off" v-model="memberForm.name"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" @click="handleMemberForm">确 定</el-button>
    </div>
</el-dialog>
    `,
    props: ['dialog-show','form-row'],
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        currentTally () {
            return this.$store.state.currentTally
        }
    },
    watch: {
        dialogShow:{
            handler (newVal) {},
            deep:true,
            immediate: true
        },
        formRow: {
            handler (newVal) {
                this.memberForm = newVal
            },
            deep:true
        }
    },
    data:function() {
        return {
            memberForm:{},
            memberRules:{
                name: [
                    { required: true, message: '请输入员工名称', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        closeModal() {
            this.$emit('modalClose')
        },
        handleMemberForm() {
            let that = this
            let postUrl;
            if(that.memberForm.id) {
                postUrl = '/api/member/edit'
            }else{
                postUrl = '/api/member/add'
            }
            that.memberForm.tally_id = that.currentTallyId
            axios.post(postUrl,that.memberForm,{
                headers: {'token': loginToken},
            }).then(function(res) {
                if(res.data.status === 'success'){
                    that.$message({
                        type: 'success',
                        message: '操作成功~'
                    })
                    that.$store.dispatch('getMemberList',that.currentTallyId)
                    that.$emit('modalClose')
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        }
    }
})
</script>
